<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>统计</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="queryData">刷新二维码</el-button>
      </div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-row>
          <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="value1"
              title="实际总佣金"
            >
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
          </el-col>
          <el-col :span="12">
          <div>
            <el-statistic :value="like ? 521 : 520" title="Feedback">
              <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
              </template>
            </el-statistic>
          </div>
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="12">
        <div class="block">
          <span class="demonstration">带快捷选项</span>
          <el-date-picker
            v-model="date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div id="pieChart" ref="pieChart"  style="width: 100%"></div>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { queryRebatePie } from '@/api/mx/rebate'
export default {
  name: 'statistics',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "今日佣金",
      query:{},
      PieInfo: []
    };
  },
  mounted() {
    this.queryData()

  },

  created() {
   // this.queryData()
  },
  methods:{
    opens(){
      this.$nextTick(() => {
        this.pie1();
      })
    },
    pie1(){
      this.completes = echarts.init(this.$refs.pieChart,"analyse");
      this.completes.setOption({
        title:{
          text:"完成情况"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ['#f56c6c','#6DC8EC', '#3F8FFF'],
        legend: {
          orient: 'vertical',
          icon: 'circle',
          align: 'left',
          x: 'right',
          y: 'bottom',
          data: ['已完成', '未完成']
        },
        series: [
          {
            name: "完成率",
            type: "pie",
            radius: '50%',
            center: ["50%", "38%"],
            data:this.PieInfo,
            avoidLabelOverlap:false,
            animationEasing: "cubicInOut",
            animationDuration: 1000,
          }
        ]
      });

    },

    queryData(){
      queryRebatePie().then(res=>{
        if (res.code === 200) {
          this.PieInfo = res.data
          this.opens()
          console.log(this.PieInfo)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
